<!-- 打印全部 -->
<template>
  <div>
    <button
      ref="printbtn"
      class="printAll"
      v-print="'#myprintDocument'"
    ></button>
    <div id="myprintDocument" class="nocalssvw" style="font-family: SimSun">
      <div id="img-contents"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    print() {
      this.$refs["printbtn"].click();
    },

    onLoadImage(url) {
      return new Promise((resolve, reject) => {
        let img = new Image();
        img.style = "width: 210mm; height: 297mm";
        img.src = url
        img.onload = (res) => {
          resolve(img)
        };
        img.onerror = (err) => {
          reject(err)
        }
      })
    },

    async setPrintImages(list) {
      let dom = document.getElementById("img-contents");
      dom.innerHTML = "";
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        let img = await this.onLoadImage(e.url)
        dom.appendChild(img);
      }
      this.print()
      return dom
    },
  },
};
</script>
<style>
@page {
  size: auto;
  margin: 0;
}
</style>
<style scoped lang="scss">
.printAll {
  display: none;
  font-family: SimSun;
}
.myprintbtn {
  display: none;
}
#myprintDocument {
  position: fixed;
  min-width: 645px;
  left: 900000px;
  page-break-after: always;
  width: 210mm;
  padding: 10mm;
  img {
    width: 210mm;
    height: 297mm;
  }
}
@media print {
  #myprintDocument {
    position: static;
    min-width: 100%;
    page-break-after: auto;
    width: 210mm;
    padding: 10mm;
    img {
      width: 210mm;
      height: 297mm;
    }

  }
}
</style>